<template>
    <div class="user-nav">
        <div class="user-nav-info">
            <el-popover placement="bottom-end" :width="200" trigger="click">
                <template #reference>
                    <el-avatar :icon="UserFilled" />
                </template>
                <div style="width: 100x;">
                    <el-row style="border-bottom: 1px solid #eee; height: 60px">
                        <el-col :span="7">
                            <el-avatar :icon="UserFilled" />
                        </el-col>
                        <el-col :span="17">
                            <el-row>
                                <el-col><span>{{ currentUser.username }}</span></el-col>
                                <el-col><span>{{ currentUser.phone }}</span></el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col>
                            <el-button class="login-out" type="" @click="logout">退出</el-button>
                        </el-col>
                        
                    </el-row>
                </div>
            </el-popover>
        </div>
    </div>
</template>

<script setup lang="ts">
// 从store中读取currentUser 信息
import { useStore } from 'vuex'
import { useRouter } from 'vue-router';
import Many from '@/utils/many'
import { onMounted } from 'vue';
import { UserFilled } from '@element-plus/icons-vue'
import { reactive } from 'vue';

const router = useRouter();
const store = useStore();

const currentUser = reactive({
    username: "",
    phone: "123456789"
});

onMounted(() => {
    ckeckLogin();
});

const ckeckLogin = () => {
    const storeCurrentUser = store.state.user.currentUser;
    if (!storeCurrentUser) {
        Many.confirm({
            title: '提示信息',
            message: '请先登录',
            showCancelButton: false,
            showClose: false
        }, () => {
            router.push('/login');
        });
    } else {
        Object.assign(currentUser, storeCurrentUser)
    }
}

const logout = () => {
    store.commit('user/removeToken');
    store.commit('user/setIsLogin', false);
    store.commit('user/setCurrentUser', '');
    router.push('/login');
}

</script>

<style scoped>
.user-nav {
    display: flex;
    align-items: center;
    justify-content: right;
    height: 100%;
}
.user-nav-info {
    display: flex;
    align-items: center;
    justify-content: right;
    height: 100%;
}
.login-out {
    width: 100%; 
    justify-content: left; 
    color: red;
    border: 0px;
    margin-top: 10px;
}
.login-out:active {
    background-color: #f0f0f0 !important;
}
</style>